<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch 实现计数器</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="case12-demo2">
    <p style="font-size: 25px">计数器:{{counte}}</p>
    <button v-on:click="counte++" style="font-size: 25px">点我</button>
    <button v-on:click="cancal()">取消监听</button>
</div>
<script type="text/javascript">
    var case12Demo2=new Vue({
        el:"#case12-demo2",
        data:{
            counte:1
        }
    });
    let unwatch=case12Demo2.$watch("counte",function (newValue,oldValue) {
        alert("计数器值的变化:"+newValue+"变为"+oldValue+"!")
    })
    function cancal() {//取消监听
        unwatch();
    }
</script>
</body>
</html>